<style lang="stylus" type="text/stylus">
@import 'organizationAuditAcc.styl';
</style>

<template>
  <div id="organizationAuditAcc">

    <VuePerfectScrollbar class="organization-audit-acc-ps">
      <div class="organization-item"
           v-if="organizationItem.length && index !== organizationItem.length-1"
           v-for="(item,index) in organizationItem" :key="index">

        <div class="organization-name first-name">{{item.name}}<span class="number"> | {{howPP(item.children)}}人</span>
        </div>

        <div class="organization-body item-body" v-if="organizationDownUp.includes(index)">
          <ul v-if="item.children.length">
            <li class="item-body-list" v-for="(child,childIndex) in item.children" :key="childIndex">
              <div class="child-name">{{child.name}}<span class="number"> | {{child.users.length}}人</span></div>
              <div class="item-body-child" v-if="organizationChildDownUp[index].includes(childIndex)">
                <span class="user-tag" v-for="(user,userIndex) in child.users" :key="userIndex"
                      @click="readAcc(user,'查看审核者')">
                  <span>{{user.name}}</span>
                  <span @click.stop="deleteUser(user.loginName)">
                    <Icon type="android-close"></Icon>
                  </span>
                </span>
                <div class="add-auditor" @click="addAcc(child.id)" icon="plus">
                  <Icon type="ios-plus-empty"></Icon>
                </div>
              </div>
              <div class="down-up" @click="childDownUp(index,childIndex)">
                <Icon v-if="organizationChildDownUp[index].includes(childIndex)" type="chevron-up"></Icon>
                <Icon v-else type="chevron-down"></Icon>
              </div>
              <div class="btn-tools">
                <span :class="{colorccc:childIndex == 0}" @click="organizationUpDown(child.id,true)" class="up">
                  <Icon type="android-arrow-up"></Icon>
                </span>
                <span :class="{colorccc:childIndex == item.children.length-1}"
                      @click="organizationUpDown(child.id,false)"
                      class="down">
                  <Icon type="android-arrow-down"></Icon>
                </span>
                <span @click="deleteOrganization(child.id,child.deletable)"
                      :class="{colorccc:!child.deletable}"
                      class="del">
                  <i class="iconfont icon-delete" type="android-delete"></i>
                </span>
              </div>
            </li>
          </ul>
          <Button class="add-child-organization btn-style-com add-child"
                  @click="addOrganization(item.id)" type="success" long>
            <Icon style="margin-right: 19px" type="plus"></Icon>
            <span>添加子组织</span>
          </Button>
        </div>

        <div class="down-up" @click="downUp(index)">
          <Icon v-if="organizationDownUp.includes(index)" type="chevron-up"></Icon>
          <Icon v-else type="chevron-down"></Icon>
        </div>

        <div class="btn-tools">
          <span :class="{colorccc:index==0}" class="up" @click="organizationUpDown(item.id,true)">
            <Icon type="android-arrow-up"></Icon>
          </span>
          <span :class="{colorccc:index==organizationItem.length-2}" class="down"
                @click="organizationUpDown(item.id,false)">
            <Icon type="android-arrow-down"></Icon>
          </span>
          <span :class="{colorccc:!item.deletable}" class="del" @click="deleteOrganization(item.id,item.deletable)">
            <i class="iconfont icon-delete" type="android-delete"></i>
          </span>
        </div>
      </div>

      <Button class="add-organization btn-style-com" @click="addOrganization()" long>
        <Icon style="margin-right: 19px" type="plus"></Icon>
        <span>添加组织</span>
      </Button>

      <div class="thirdParty">
        <div class="thirdParty-name first-name">第三方机构<span> | <span v-if="thirdPartyData">{{thirdPartyData.users.length}}</span>人</span>
        </div>
        <div class="item-body" v-if="thirdPartyDownUpActive">
          <span v-if="thirdPartyData && thirdPartyData.users.length" class="user-tag"
                v-for="(user,index) in thirdPartyData.users" :key="index"
                @click="readAcc(user,'查看审核者')">
              <span>{{user.name}}</span>
              <span @click.stop="deleteUser(user.loginName)">
                <Icon type="android-close"></Icon>
              </span>
          </span>
          <div class="add-auditor" @click="addAcc(thirdPartyData.id,'thirdParty')" icon="plus">
            <Icon type="ios-plus-empty"></Icon>
          </div>
          </Button>
        </div>
        <div class="down-up" @click="thirdPartyDownUpActive = !thirdPartyDownUpActive">
          <Icon v-if="thirdPartyDownUpActive" type="chevron-up"></Icon>
          <Icon v-else type="chevron-down"></Icon>
        </div>
      </div>

    </VuePerfectScrollbar>

    <!-- 添加组织、子组织 -->
    <Modal
      @on-cancel="closeAddOrganization()"
      v-model="addOrganizationActive"
      :title="addOrganizationTitle">
      <Input v-model="addOrganizationValue" :placeholder="addOrganizationPlaceholder"></Input>
      <div slot="footer">
        <Button @click="closeAddOrganization()" type="text">取消</Button>
        <Button type="primary" @click="subOrganization()" :disabled="checkAddOrganization" size="large">确定</Button>
      </div>
    </Modal>
    <!--添加帐号 -->
    <Modal
      @on-cancel="closeAddOrganization()"
      v-model="addAccActive"
      :title="addAccTitle">
      <div class="error-info">{{errorInfo}}</div>
      <Input class="add-acc-input" v-model="addAccObj.name" placeholder="名称"></Input>
      <Input class="add-acc-input" v-model="addAccObj.accounts" placeholder="设置账号"></Input>
      <Input type="password" class="add-acc-input" v-model="addAccObj.password" placeholder="设置初始密码"></Input>
      <div slot="footer">
        <Button @click="closeAddOrganization()" type="text">取消</Button>
        <Button type="primary" @click="subAcc()" :disabled="checkAddAcc" size="large">创建账号</Button>
      </div>
    </Modal>
    <!-- 查看帳號 -->
    <Modal
      @on-cancel="closeAddOrganization()"
      v-model="readAccActive"
      :title="readAccTitle">
      <div class="modal-read-name">{{readAccName}}</div>
      <div class="modal-read-accounts">帐号：{{readAccAcc}}</div>
      <div slot="footer">
        <Button @click="closeAddOrganization()" type="text">关闭</Button>
        <Button type="warning" @click="resetAcc()" size="large">重置密码</Button>
      </div>
    </Modal>
    <!-- 重置密码 -->
    <Modal
      @on-cancel="closeAddOrganization()"
      v-model="resetAccActive"
      :title="resetAccTitle">
      <Input type="password" class="add-acc-input" v-model="resetAccValue" placeholder="设置新密码"></Input>
      <div slot="footer">
        <Button @click="closeAddOrganization()" type="text">取消</Button>
        <Button type="primary" :disabled="checkResetAcc" @click="subResetAcc()" size="large">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script type="text/ecmascript-6">
import sha1 from "js-sha1";

export default {
  name: "organizationAuditAcc",
  data() {
    return {
      organizationItem: [],
      addOrganizationTitle: "",
      addOrganizationActive: false,
      addOrganizationValue: "",
      addOrganizationPlaceholder: "",
      organizationDownUp: [],
      organizationChildDownUp: [],
      addOrganizationID: "",

      thirdPartyItem: [{}, {}, {}],
      thirdPartyDownUpActive: true,

      addAccTitle: "",
      errorInfo: "",
      addAccObj: {
        name: "",
        accounts: "",
        password: ""
      },
      addAccID: "",
      addAccActive: false,

      readAccActive: false,
      readAccTitle: "",
      readAccName: "",
      readAccAcc: "",

      resetAccActive: false,
      resetAccTitle: "",
      resetAccValue: ""
    };
  },
  computed: {
    thirdPartyData() {
      return this.organizationItem.length
        ? this.organizationItem[this.organizationItem.length - 1]
        : "";
    },
    checkAddOrganization() {
      return this.addOrganizationValue ? false : "disabled";
    },
    checkAddAcc() {
      return Object.values(this.addAccObj).every(v => {
        return v;
      })
        ? false
        : "disabled";
    },
    checkResetAcc() {
      return this.resetAccValue ? false : "disabled";
    }
  },
  methods: {
    organizationData() {
      this.ajaxData(
        {
          urlv2: "v2",
          type: "get",
          url: "/workflow/organization"
        },
        (res, all) => {
          if (all.code == 0) {
            this.organizationItem = res;
            [...this.organizationItem].forEach((n, i) => {
              this.organizationChildDownUp.push([]);
            });
          }
        }
      );
    },
    downUp(index) {
      if (this.organizationDownUp.includes(index)) {
        let $index = this.organizationDownUp.findIndex(n => n == index);
        this.organizationDownUp.splice($index, 1);
      } else {
        this.organizationDownUp.push(index);
      }
    },
    childDownUp(parent, index) {
      if (this.organizationChildDownUp[parent].includes(index)) {
        let $index = this.organizationChildDownUp[parent].findIndex(
          n => n == index
        );
        this.organizationChildDownUp[parent].splice($index, 1);
      } else {
        this.organizationChildDownUp[parent].push(index);
      }
    },
    addOrganization(id) {
      this.addOrganizationActive = !0;
      if (id) {
        this.addOrganizationTitle = "添加子组织";
        this.addOrganizationPlaceholder = "输入子组织名";
        this.addOrganizationID = id;
      } else {
        this.addOrganizationTitle = "添加组织";
        this.addOrganizationPlaceholder = "输入组织名";
        this.addOrganizationID = "";
      }
    },
    subOrganization() {
      if (this.addOrganizationValue.length < 2) {
        this.$Message.error("组织名不能少于两位！");
      } else {
        this.ajaxData(
          {
            urlv2: "v2",
            type: "post",
            url: "/workflow/organization/add",
            data: {
              name: this.addOrganizationValue,
              parentId: this.addOrganizationID
            }
          },
          (res, all) => {
            if (all.code == 0) {
              this.closeAddOrganization();
              this.organizationData();
            }
          }
        );
      }
    },
    deleteOrganization(id, deletable) {
      if (deletable) {
        this.ajaxData(
          {
            type: "post",
            url: "/workflow/organization/delete",
            data: { id, id }
          },
          (res, all) => {
            if (all.code == 0) {
              this.organizationData();
            }
          }
        );
      }
    },
    organizationUpDown(id, action) {
      this.ajaxData(
        {
          type: "post",
          url: "/workflow/organization/roll",
          data: {
            id: id,
            up: action
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.organizationData();
          }
        }
      );
    },
    addAcc(id, action) {
      this.addAccActive = !0;
      if (action == "thirdParty") {
        this.addAccTitle = "添加第三方机构账号";
      } else {
        this.addAccTitle = "添加审核者";
      }
      this.addAccID = id;
    },
    subAcc() {
      if (
        this.addAccObj.name.length >= 2 &&
        this.addAccObj.accounts.length >= 2 &&
        this.addAccObj.password.length >= 2
      ) {
        this.ajaxData(
          {
            urlv2: "v2",
            type: "post",
            url: "/workflow/organization/user/add",
            data: {
              orgId: this.addAccID,
              name: this.addAccObj.name,
              loginName: this.addAccObj.accounts,
              // password: sha1(this.addAccObj.password)
              pwd: sha1(this.addAccObj.password)
            }
          },
          (res, all) => {
            if (all.code == 0) {
              this.closeAddOrganization();
              this.organizationData();
            }
          }
        );
      } else {
        this.$Message.error("名称、账号、密码的长度要大于2位！");
        return;
      }
    },
    readAcc(user, title) {
      this.readAccActive = !0;
      this.readAccTitle = title;
      this.readAccName = user.name;
      this.readAccAcc = user.loginName;
    },
    resetAcc() {
      this.closeAddOrganization();
      this.resetAccActive = !0;
      this.resetAccTitle = "重置密码";
    },
    subResetAcc() {
      this.ajaxData(
        {
          type: "post",
          url: "/workflow/organization/user/reset",
          data: {
            loginName: this.readAccAcc,
            // password: sha1(this.resetAccValue)
            pwd: sha1(this.resetAccValue)
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.closeAddOrganization();
            this.$Message.success("重置成功");
          }
        }
      );
    },
    deleteUser(loginName) {
      this.ajaxData(
        {
          type: "post",
          url: "/workflow/organization/user/delete",
          data: { loginName: loginName }
        },
        (res, all) => {
          if (all.code == 0) {
            this.organizationData();
          }
        }
      );
    },
    userUpDown(loginName, action) {
      this.ajaxData(
        {
          type: "post",
          url: "/workflow/organization/user/roll",
          data: {
            loginName: loginName,
            up: action
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.organizationData();
          }
        }
      );
    },

    closeAddOrganization() {
      this.addOrganizationValue = "";
      this.addOrganizationActive = false;
      for (let i in this.addAccObj) {
        this.addAccObj[i] = "";
      }
      this.addAccActive = false;
      this.readAccActive = false;
      this.resetAccActive = false;
      this.resetAccValue = "";
    },

    btnTools(type) {
      if (type == "up") {
      } else if (type == "down") {
      } else {
      }
    },
    howPP(arr) {
      let num = 0;
      for (let v of arr) {
        num += v.users.length;
      }
      return num;
    }
  },
  created() {
    this.organizationData();
  }
};
</script>
